<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-点击表格-显示输入框.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      input{
        display: none;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>姓名</td>
      </tr>
      <tr>
        <td>悟空 <input type="text"> </td>
      </tr>
    </table>
    <script>
      const table=document.querySelector("table");
      table.addEventListener("click",function (event) {
        console.log(1);
        // event.target
        // document.querySelector("div");
        // table.querySelector("div")
        event.target.querySelector("input").style.display="block";
        event.target.querySelector("input").value= event.target.innerText;
      });

      // 失去焦点  表单组件有事件 
      const inputs=document.querySelectorAll("input");
      inputs.forEach(input=>{
        input.addEventListener("blur",function () {
          input.style.display="none";
        })
      })


    </script>
  </body>
</html>
